(function () {
  const bannerNavUl = document.getElementById('banner-nav-ul')
  const bannerNav = document.getElementById('banner-nav')
  //寻找所有menu
  const menus = document.querySelectorAll('.menus-box .menu')
  const bannerLis = document.querySelectorAll('#banner-nav ul li')
  //事件委托
  bannerNavUl.onmouseover = function (e) {
    if (e.target.tagName.toLowerCase() === 'li') {
      let t = e.target.getAttribute('data-t')

      //排他操作
      for (let i = 0; i < bannerLis.length; i++) {
        bannerLis[i].className = bannerLis[i].getAttribute('data-t')
      }
      //当前碰到的li 加current
      e.target.className += ' current'
      //寻找匹配的menu
      let themenu = document.querySelector('.menus-box .menu[data-t=' + t + ']');



      //排他操作 让所有的盒子都去掉current类名
      for (let i = 0; i < menus.length; i++) {
        menus[i].className = 'menu'
      }

      //匹配的这项加上current类名
      themenu.className = 'menu current'
    }
  }

  //当鼠标离开大盒子的时候 菜单关闭
  bannerNav.onmouseleave = function () {
    for (let i = 0; i < bannerLis.length; i++) {
      bannerLis[i].className = bannerLis[i].getAttribute('data-t')
      menus[i].className = 'menu'
    }
  }
})();